<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ONVIF Network Camera Manager</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <!-- -->
    <link href="style.css" rel="stylesheet">
    <script src="onvif.js"></script>
</head>

<body>

    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <h1><a class="navbar-brand" href="https://github.com/futomi/node-onvif" target="_blank">ONVIF Network
                        Camera Manager</a></h1>
            </div>
        </div>
    </div>

    <div class="container theme-showcase" role="main" id="main-wrapper">
        <form class="form-horizontal" id="connect-form">
            <div class="form-group">
                <label for="device" class="col-sm-2 control-label">Device</label>
                <div class="col-sm-10">
                    <select class="form-control" id="device" name="device">
                        <option>now searching...</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="user" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="user" name="user" disabled>
                </div>
            </div>
            <div class="form-group">
                <label for="pass" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="pass" name="pass" disabled>
                </div>
            </div>
            <button type="button" class="form-control btn btn-primary" name="connect" disabled>Connect</button>
        </form>

        <div id="connected-device">
            <p><img class="snapshot" src=""></p>
            <div class="device-info-box"><span class="name"></span> (<span class="address"></span>)</div>
            <div class="ptz-ctl-box">
                <div class="ptz-pad-box">
                    <button type="button" class="ptz-goto-home"><span class="glyphicon glyphicon-home"></span></button>
                    <span class="left glyphicon glyphicon-menu-left"></span>
                    <span class="right glyphicon glyphicon-menu-right"></span>
                    <span class="up glyphicon glyphicon-menu-up"></span>
                    <span class="down glyphicon glyphicon-menu-down"></span>
                </div>
            </div>
            <div class="ptz-spd-ctl-box">
                <span class="label">PTZ speed for keyboard</span>
                <div class="btn-group btn-group-sm" data-toggle="buttons">
                    <label class="btn btn-default"><input type="radio" name="ptz-speed" value="0.5"> slow</label>
                    <label class="btn btn-default"><input type="radio" name="ptz-speed" value="0.75"> medium</label>
                    <label class="btn btn-default active"><input type="radio" name="ptz-speed" value="1.0" checked>
                        fast</label>
                </div>
            </div>
            <div class="ptz-zom-ctl-box btn-group btn-group-lg" role="group" aria-label="Zoom">
                <button type="button" class="ptz-zom ptz-zom-ot btn btn-default"><span
                        class="glyphicon glyphicon-zoom-out"></span></button>
                <button type="button" class="ptz-zom ptz-zom-in btn btn-default"><span
                        class="glyphicon glyphicon-zoom-in"></span></button>
            </div>
            <div class="disconnect-box">
                <button type="button" class="form-control btn btn-default" name="disconnect">Disconnect</button>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="message-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p class="modal-message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>